<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客</title>
    <link th:href="@{/js/el/index.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/index.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <h2 style="background-color: #3a8ee6;margin: 0;">
            <div style="float: right">
                <input type="text" v-model="titlename" placeholder="搜索标题">
                <button @click="findByName()">搜索</button>
            </div>
        </h2>
        <div style="margin: 10px;width: 97%;border: 1px solid #0000ff;display:block;clear:both;" v-if="aath == 0"  v-for="b in bokes">
            <h3 style="margin: 0; background-color: #8cc5ff;border-bottom: 2px dashed #8cc5ff">{{b.title}}</h3>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;摘要：{{b.matter}}<button @click="findMatter(b.detaid)">阅读更多</button></p>
            <div style="text-align: right">
                <a>{{b.timedate}}</a>
                <a>作者：{{b.uid}}</a>
                <a>[评论:0][阅读:16]</a>
            </div>
        </div>
        <div id="book" v-if="aath != 0">

        </div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            aath:0,
            bokes:[],
            titlename:"",

        },
        methods:{
            findMatter(bid){
                this.aath = 1;
                axios.get("/api/fore/findById/"+bid)
                    .then(function (resp) {
                        document.getElementById("book").innerHTML = resp.data.data.details;
                    })
            },
            findByName(){
                var than = this;
                this.aath = 0;
                axios.get("/api/fore/findBy/"+this.titlename)
                    .then(function (resp) {
                        than.bokes = resp.data.data
                    })
            }
        },
        mounted(){
            this.aath = 0;
            var than = this;
            axios.get("/api/blog/findByUid")
                .then(function (resp) {
                    than.bokes = resp.data.data;
                })
        }
    })
</script>
</html>